import React from "react"
import { List, Typography, Checkbox as AntdCheckbox } from "antd"
import useCategories from "../../../hooks/categories"
import { CheckboxValueType } from "antd/lib/checkbox/Group"
import styles from './checkbox.module.scss'

const { Title } = Typography


const Checkbox = ({ handleFilter }: { handleFilter(filters: string[]): void }) => {
    const [categories] = useCategories()
    const onchange = (checkedValue: CheckboxValueType[]) => {
        handleFilter(checkedValue as string[])
    }

    return (
        <>
            <Title level={4}>按照分类筛选</Title>
            <AntdCheckbox.Group
                className={styles.CheckboxGroup}
                options={categories.map(item => {
                    return { label: item.name, value: item._id }
                })}
                onChange={onchange}>

            </AntdCheckbox.Group>
        </>
    )
}

export default Checkbox
